<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录 - 跨屏朋友圈</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/AdminLTE.min.css">
    <style>
        .login-page{ color:#fff; background:url(images/sign-in.jpg); background-size:cover}
        .log-area{ margin-top:30px}
        p.pull-right{ margin-bottom:0}
        .nav-tabs-custom{ background:rgba(255,255,255,0.15)}
        .login-logo img{ max-height:100px}

        a{ color:#f26236}
        a:hover{ color:#FF5809}
        .btn-primary{ background-color:#f26236; border-color:#f26236}
        .btn-primary:hover{ background-color:#FF5809; border-color:#FF5809}
    </style>
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href="#"><b><img src="images/sign-in-logo.png" /></b></a>
    </div>
    <div class="nav-tabs-custom">
        <div class="tab-content">
            <!--login-->
            <div class="login-box-body tab-pane active" id="login">
                <p class="login-box-msg text-bold"></p>
                <form action="/login" method="post">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" placeholder="用户名">
                        <span class="fa fa-user form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" class="form-control" placeholder="密码">
                        <span class="fa fa-lock form-control-feedback"></span>
                    </div>
                    <p class="pull-right">没有账号？<a href="#singup" data-toggle="tab">立即注册</a></p>
                    <div class="clearfix"></div>
                    <div class="row log-area">
                        <div class="col-xs-12">
                            <button type="submit" class="btn btn-primary btn-block btn-flat">登 录</button>
                        </div>
                    </div>
                </form>
            </div>
            <!--signup-->
            <div class="login-box-body tab-pane" id="singup">
                <p class="login-box-msg text-bold" id="singup_err"></p>
                <form action="/login" method="post" id="singup_form">
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" placeholder="用户名" id="name">
                        <span class="fa fa-user form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="email" class="form-control" placeholder="邮箱" id="email">
                        <span class="fa fa-envelope form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" class="form-control" placeholder="密码" id="password">
                        <span class="fa fa-lock form-control-feedback"></span>
                    </div>
                    <p class="pull-right">已有账号，<a href="#login" data-toggle="tab">登录账号</a></p>
                    <div class="clearfix"></div>
                    <div class="row log-area">
                        <div class="col-xs-12">
                            <div type="submit" class="btn btn-primary btn-block btn-flat" id="submit">注 册</div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="js/jQuery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    $(function(){
        $('#submit').click(function(){

            function check(){
                var errorMsg=null;

                if( !$.trim($('#name').val()) ){
                    return errorMsg = {msg:'用户名不能为空',target:'name'}
                }

                if( !$.trim($('#email').val()) ){
                    return errorMsg = {msg:'邮箱不能为空',target:'email'}
                }else if( $.trim($('#email').val())!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($('#email').val()) ){
                    return errorMsg = {msg:'请输入正确的邮箱地址',target:'email'}
                }

                if( !$.trim($('#password').val()) ){
                    return errorMsg = {msg:'密码不能为空',target:'password'}
                }else if( $.trim($('#password').val()).length < 6 ){
                    return errorMsg = {msg:'密码不能小于6位',target:'password'}
                }

                return errorMsg
            }

            var err=check();

            if(err){
                $('#singup_err').html(err.msg);
                $('#'+err.target).focus()
            }else{
                $('#singup_form').submit()
            }

        })
    })
</script>
</body>
</html>
